<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <link rel="stylesheet" type="text/css" th:href="@{/static/css/dining.css}" />
</head>
<body>

<!-- 引入公共头部 -->
<header th:replace="common/top"></header>

<style>
  input[type="text"], input[type="password"], input[type="email"] {
    width: 100%;
    max-width: 120px;
    padding: 6px 10px;
    margin: 6px 0;
    font-size: 14px;
    border: 1.5px solid #a87c5a;
    border-radius: 5px;
    background-color: #fffdfa;
    color: #734012;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
    outline: none;
    border-color: #fccc1c;
    background-color: #fffef4;
    box-shadow: 0 2px 5px rgba(252, 204, 28, 0.15);
  }

  input[type="text"]::placeholder,
  input[type="password"]::placeholder,
  input[type="email"]::placeholder {
    color: #b28e73;
    font-style: italic;
    opacity: 0.8;
  }
</style>

<div id="BackLink">
  <a th:href="@{/catalog/index}">Return to Main Menu</a>
</div>

<div id="Catalog">
  <form th:action="@{/account/register}" method="post">

    <p th:if="${signOnMsg}" style="color:red;" th:text="${signOnMsg}"></p>

    <h3>User Information</h3>
    <h4>密码至少为8位，且同时包含数字和字母</h4>

    <table style="width: 40%; margin: 0 auto;">
      <tr>
        <td>Username:</td>
        <td>
          <input id="username" type="text" name="username" onblur="checkAccount();">
          <span id="isAccountExist"></span>
        </td>
      </tr>
      <tr>
        <td>Password:</td>
        <td>
          <input id="password" type="password" name="password" onblur="checkCode();">
          <span id="isProperCode"></span>
        </td>
      </tr>
      <tr>
        <td>Repeat Password:</td>
        <td>
          <input id="repeatedPassword" type="password" name="repeatPassword" onblur="checkRepeatedCode();">
          <span id="isRepeatedCode"></span>
        </td>
      </tr>
    </table>

    <!-- 引入额外账户字段 -->
    <div th:insert="account/includeAccountFields :: includeAccountFields"></div>


    <p>
      Verification: <input type="text" name="verificationCode">
      <img th:src="@{/account/captcha}">
    </p>

    <input type="submit" name="newAccount" value="Save Account Information">
  </form>
</div>

<script th:src="@{/static/js/account.js}"></script>

</body>
</html>